<template>
	<view id="shoppingPage">
		<view class="jumbo1">
			<image class="jumbo-img" src="../../static/img/shop-jumbo1.png" mode=""></image>
		</view>
		<view class="nav-wrapper">
			<view v-for="nav in navs" :key="nav.id" class="nav" @click="tabTo('../libary/libary?type=n')">
				<image class="nav-img" :src="`${host}${nav.logo}`"></image>
			</view>
			<!-- <view class="nav" @click="tabTo('../libary/libary?type=n')">
				<image class="nav-img" src="../../static/img/index-nav1.png" mode=""></image>
			</view>
			<view class="nav" @click="tabTo('../libary/libary?type=v')">
				<image class="nav-img" src="../../static/img/index-nav2.png" mode=""></image>
			</view>
			<view class="nav" @click="navTo('../custom/custom')">
				<image class="nav-img" src="../../static/img/index-nav3.png" mode=""></image>
			</view> -->
		</view>
		<view class="jumbo2">
			<image class="jumbo-img" src="../../static/img/shop-jumbo2.png" mode=""></image>
		</view>
		<view class="jumbo3">
			<image src="../../static/img/clubs.png" mode="aspectFill" class="clubs"></image>
			<image class="jumbo-img" src="../../static/img/shop-jumbo3.png" mode=""></image>
		</view>
		<view class="jumbo4">
			<image class="jumbo-img" src="../../static/img/shop-jumbo4.png" mode=""></image>
		</view>
		<coupon-modal v-if="modalVisable" @close="close"></coupon-modal>
	</view>
</template>

<script>
	import couponModal from "@/components/coupon-modal/coupon-modal.vue"
	import api from '../../consts/api.js'
	import { host } from '../../consts/config.js'
	export default {
		components: {couponModal},
		data() {
			return {
				host,
				modalVisable: true,
				navs: []
			}
		},
		onLoad() {
			this.wxLogin()
			
			this.index()
		},
		methods: {
			tabTo(url) {
				uni.switchTab({
					url
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			close() {
				this.modalVisable = false
			},
			
			index() {
				let that = this
				uni.request({
					url: api.index,
					method: 'GET',
					data: {},
					success: res => {
						let {code,data} = res.data
						if(code==101) {
							that.navs = data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			
			// 获取openid
			code2Session() {
				let that = this
				uni.request({
					url: api.code2Session,
					method: 'GET',
					data: {
						code:  uni.getStorageSync('code')
					},
					success: res => {
						let {openid} = res.data
						console.log(openid)
						uni.setStorageSync('openid', openid)	
						
					},
					fail: () => {},
					complete: () => {}
				});
			},
			wxLogin() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res)
						uni.setStorage({
							key: 'code',
							data: res.code
						})
						that.code2Session()
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		
	}
</script>

<style>
#shoppingPage {
	background: #111821;
}
.jumbo-img {
	width: 100%;
	height: 100%;
}
.jumbo1 {
	height: 1295upx;
}
.nav-wrapper {
	height: 676upx;
	background:#111821;
	padding-top: 31upx;
}
.nav {
	margin: 33upx auto 0;
	width: 658upx;
	height: 190upx;
}
.nav-img {
	width: 100%;
	height: 100%;
}
.jumbo2 {
	height: 905upx;
}
.jumbo3 {
	height: 1540upx;
	position: relative;
}
.clubs {
	width: 373upx;
	height: 489upx;
	position: absolute;
	top: 77upx;
	left: 0;
}
.jumbo3 {
	height: 1540upx;
}
.jumbo4 {
	height: 1127upx;
}
</style>
